﻿@using StatCan.OrchardCore.EmailTemplates.ViewModels;
@using OrchardCore.ContentManagement;
@using OrchardCore.ContentManagement.Routing;
@using Newtonsoft.Json;
@using System.Globalization;
@model EmailTemplatePartSettingsViewModel
@inject OrchardCore.ContentManagement.IContentManager ContentManager

@{
    var allEmailTemplates = JsonConvert.SerializeObject(Model.EmailTemplates.Select(c => new { c.Text, c.Value}).ToArray());
    var selectedItems = JsonConvert.SerializeObject(null);
    if (Model.SelectedEmailTemplates != null){
      selectedItems = JsonConvert.SerializeObject(Model.EmailTemplates.Where(x => Model.SelectedEmailTemplates.Contains(x.Value)).Select(c => new { c.Text, c.Value}).ToArray());
    }
    var partName = "EmailTemplate";
    var fieldName = "EmailTemplate";
    var vueElementId = $"ContentPicker_{partName}_{fieldName}_{Guid.NewGuid().ToString("n")}";
    var multiple = "true";
}

<script asp-name="vue-multiselect-wrapper" asp-src="~/StatCan.OrchardCore.EmailTemplates/Scripts/vue-multiselect-wrapper.js" at="Foot" depends-on="vuejs, vue-multiselect, sortable, vuedraggable"></script>
<style asp-name="vue-multiselect-wrapper" asp-src="~/StatCan.OrchardCore.EmailTemplates/Styles/vue-multiselect-wrapper.min.css" debug-src="~/StatCan.OrchardCore.EmailTemplates/Styles/vue-multiselect-wrapper.css" depends-on="vue-multiselect"></style>

<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-all-items="@allEmailTemplates" data-multiple="@multiple">

    <div class="form-group">
        <ul class="list-group w-xl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
            <draggable v-model="arrayOfItems">
                <li v-for="(item, i) in arrayOfItems"
                    class="cursor-move list-group-item content-picker-default__list-item d-flex align-items-start justify-content-between"
                    :key="item">
                    <div class="align-items-center align-self-center"><span>{{ item.Text }}</span></div>

                    <div class="btn-group btn-group-sm align-items-center" role="group">
                        <button v-on:click="remove(item)" type="button" class="btn btn-secondary content-picker-default__list-item__delete"><i class="fa fa-trash fa-sm" aria-hidden="true"></i></button>
                    </div>
                </li>
            </draggable>
        </ul>
    </div>

    <div class="form-group">
        <div class="w-xl-50">
            <input asp-for="SelectedEmailTemplates" type="hidden" v-model="selectedIds" />
            <vue-multiselect :options="options" track-by="Value"
                             label="displayText" placeholder="@T["Select Email Templates"]"
                             @@select="onSelect"
                             :searchable="false" :close-on-select="true" :reset-after="true"
                             :show-labels="true" :hide-selected="@multiple"
                             :disabled="isDisabled"
                             select-label="@T["Select"]" deselect-label="@T["Remove"]">
                <template slot="option" slot-scope="props">
                    <div v-cloak><span>{{ props.option.Text }}</span></div>
                </template>
                <template slot="noResult">
                    @T["No result found"]
                </template>
            </vue-multiselect>
        </div>
    </div>
</div>
<script at="Foot" depends-on="vue-multiselect-wrapper">initVueMultiselect(document.querySelector("#@vueElementId"))</script>



